/* eslint-disable @typescript-eslint/no-shadow */
/* eslint-disable react/no-array-index-key */
/* eslint-disable react-hooks/rules-of-hooks */
import { Button, Table, Modal, message } from 'antd';
import { useEffect, useState } from 'react'
import * as API from "../../api/zl"
import "./index.less"
export default function index() {
  // eslint-disable-next-line react-hooks/rules-of-hooks
  // const [dataSource, setdataSource] = useState<any>([])
  const [list, setlist] = useState<any>(['音乐', '视频', '图片', '文字'])
  const [getimg, setimg] = useState<any>([])   //获取上传图片
  const [getvideo, setvideo] = useState<any>([]) //获取上传视频
  const [getmusic, setmusic] = useState<any>([]) //获取上传音乐
  const [getwords, setwords] = useState<any>([]) //获取上传文字
  const [musicitem, setmusicitem] = useState<any>(Object)
  const [wordsitem, setwordsitem] = useState<any>(Object)
  const [videoitem, setvideoitem] = useState<any>(Object)
  const [imgitem, setimgitem] = useState<any>(Object)
  useEffect((): void => {//获取上传音乐
    API.getlineMusic().then((res) => {
      setmusic(res.data.data)
    })
    API.getlinevedio().then((res) => {//获取上传视频
      setvideo(res.data.data)
    })
    API.getPhoto().then((res) => {  //获取上传图片
      setimg(res.data.data)
    })
    API.getwords().then((res) => {//获取上传文字
      setwords(res.data.data)
    })
  }, [])
  const [visible, setVisible] = useState(false);
  const success = () => {
    message.success('审核通过,已经上线前端');
  };
  const showDrawer = () => {
    setVisible(true);
  };
  const [isModalVisible, setIsModalVisible] = useState(false);
  const [isModalVisible1, setIsModalVisible1] = useState(false);
  const [isModalVisible2, setIsModalVisible2] = useState(false);
  const [isModalVisible3, setIsModalVisible3] = useState(false);

  const showModal = () => {
    setIsModalVisible(true);
  };
  const showModal1 = () => {
    setIsModalVisible1(true);
  }; const showModal2 = () => {
    setIsModalVisible2(true);
  }; const showModal3 = () => {
    setIsModalVisible3(true);
  };
  const handleOk = () => {
    setIsModalVisible(false);
  };
  const handleOk1 = () => {
    setIsModalVisible1(false);
  };
  const handleOk2 = () => {
    setIsModalVisible2(false);
  };
  const handleOk3 = () => {
    setIsModalVisible3(false);
  };

  const handleCancel = () => {
    setIsModalVisible(false);
  };
  const handleCancel1 = () => {
    setIsModalVisible1(false);
  };
  const handleCancel2 = () => {
    setIsModalVisible2(false);
  };
  const handleCancel3 = () => {
    setIsModalVisible3(false);
  };
  const music: any = [
    {
      align: 'center',
      title: 'ID',
      dataIndex: 'id'
    },
    {
      align: 'center',
      title: '状态',
      dataIndex: 'lines',
      render: (lines: number) => <a>{lines == 0 ? '待审核' : '已审核'}</a>
    },
    {
      align: 'center',
      title: '歌名',
      dataIndex: 'title'
    },
    {
      align: 'center',
      title: '图片',
      dataIndex: 'img',
      render: (img: string) => <img src={img} alt="" />
    },
    {
      align: 'center',
      title: '歌曲',
      dataIndex: 'musname',
      render: (musname: string) => <audio src={musname} controls />
    },
    {
      align: 'center',
      title: '作者',
      dataIndex: 'author'
    },
    {
      align: 'center',
      title: '操作',
      width: '245px',
      render: (lines: number, id: any) => <>
        {
          id.lines == 0 ? <Button type="link" onClick={() => {

            setmusicitem(id)
            showModal()
            showDrawer()
            // setUsername(row);
          }}>审核</Button> : <Button type="link" onClick={() => {


            // setUsername(row);
          }}>已审核</Button>


        }
      </>
    }
  ];
  const video: any = [
    {
      align: 'center',
      title: 'ID',
      dataIndex: 'id'
    },
    {
      align: 'center',
      title: '状态',
      dataIndex: 'lines',
      render: (lines: number) => <a>{lines == 0 ? '待审核' : '已审核'}</a>
    },
    {
      align: 'center',
      title: '视频',
      dataIndex: 'videoUrl',
      render: (videoUrl: string) => <video src={videoUrl} controls width='100%' height='200px' />
    },
    {
      align: 'center',
      title: '操作',
      width: '245px',
      render: (lines: number, id: any) => <>
        {
          id.lines == 0 ? <Button type="link" onClick={() => {

            setvideoitem(id)
            showModal1()
            showDrawer()
            // setUsername(row);
          }}>审核</Button> : <Button type="link" onClick={() => {


            // setUsername(row);
          }}>已审核</Button>


        }
      </>
    }
  ]
  const imglist: any = [
    {
      align: 'center',
      title: 'ID',
      dataIndex: 'id'
    },
    {
      align: 'center',
      title: '状态',
      dataIndex: 'lines',
      render: (lines: number) => <a>{lines == 0 ? '待审核' : '已审核'}</a>
    },
    {
      align: 'center',
      title: '图片',
      dataIndex: 'img',
      render: (img: string) => <img src={img} alt="" />
    },
    {
      align: 'center',
      title: '操作',
      width: '245px',
      render: (lines: number, id: any) => <>
        {
          id.lines == 0 ? <Button type="link" onClick={() => {

            setimgitem(id)
            showModal2()
            showDrawer()
            // setUsername(row);
          }}>审核</Button> : <Button type="link" onClick={() => {


            // setUsername(row);
          }}>已审核</Button>


        }
      </>
    }
  ]
  const words: any = [
    {
      align: 'center',
      title: 'ID',
      dataIndex: 'id'
    },
    {
      align: 'center',
      title: '状态',
      dataIndex: 'lines',
      render: (lines: number) => <a>{lines == 0 ? '待审核' : '已审核'}</a>
    },
    {
      align: 'center',
      title: '内容',
      dataIndex: 'name',
    },
    {
      align: 'center',
      title: '操作',
      width: '245px',
      render: (lines: number, id: any) => <>
        {
          id.lines == 0 ? <Button type="link" onClick={() => {

            setwordsitem(id)
            showModal3()
            showDrawer()
            // setUsername(row);
          }}>审核</Button> : <Button type="link" onClick={() => {


            // setUsername(row);
          }}>已审核</Button>


        }
      </>
    }
  ]
  const [nowIndex, setIndex] = useState<any>(0)

  return (
    <div className='exam'>
      <ul className='check'>
        {
          list.map((item: any, index: any) => {
            // eslint-disable-next-line react/self-closing-comp
            return <li key={index} className={nowIndex == index ? 'active' : ''} onClick={() => {
              setIndex(index)
            }}>
              {item}
            </li>
          })
        }
      </ul>
      {
        nowIndex == 0 ? <Table
          columns={music}
          // loading={loading}
          dataSource={getmusic}
          pagination={false}
          bordered
        /> : nowIndex == 1 ? <Table
          columns={video}
          // loading={loading}
          dataSource={getvideo}
          pagination={false}
          bordered
        /> : nowIndex == 2 ? <Table
          columns={imglist}
          // loading={loading}
          dataSource={getimg}
          pagination={false}
          bordered
        /> : nowIndex == 3 ? <Table
          columns={words}
          // loading={loading}
          dataSource={getwords}
          pagination={false}
          bordered
        /> : null
      }
      <Modal title="歌曲审核" visible={isModalVisible} onOk={() => {
        handleOk()
        // console.log(musicitem.id);
        const obj = {
          id: musicitem.id,
          lines: 1
        }
        API.zlchange(obj).then(() => {
          API.getlineMusic().then((res) => {
            setmusic(res.data.data)
          })
        })

        const obj1 = {
          workMain: musicitem.musname,
          portraitsImg: "https://img2.baidu.com/it/u=1163898199,560774324&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=504",
          workText: '',
          worklabel: '',
          workName: '张磊',
          likeNumber: '1230',
          recommend: '98',
          hotThe: '普通',
          workType: '3',
          workgenre: '游戏',
          workTime: new Date().toLocaleString(),
          worksHoter: '1',
          userID: musicitem.userid,
          title: musicitem.title,
          musicImg: musicitem.img,
          author: musicitem.author,
          lines: 1
        }
        console.log(obj1);

        API.addworklist(obj1).then((res) => {
          console.log(res);

        })
        success()
      }} onCancel={handleCancel}>
        <p> 该作品是否要通过审核,成功后将在前端展示</p>
      </Modal>
      <Modal title="视频审核" visible={isModalVisible1} onOk={() => {
        handleOk1()
        const obj = {
          id: videoitem.id,
          lines: 1
        }
        API.zlchangevideo(obj).then(() => {
          API.getlinevedio().then((res) => {//获取上传视频
            setvideo(res.data.data)
          })
        })
        const obj1 = {
          workMain: videoitem.videoUrl,
          portraitsImg: "https://img2.baidu.com/it/u=1163898199,560774324&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=504",
          workText: '',
          worklabel: '',
          workName: '张磊',
          likeNumber: '1230',
          recommend: '98',
          hotThe: '普通',
          workType: '2',
          workgenre: '游戏',
          workTime: new Date().toLocaleString(),
          worksHoter: '1',
          userID: videoitem.userid,
          title: '',
          musicImg: '',
          author: '',
          lines: 1
        }
        console.log(obj1);

        API.addworklist(obj1).then((res) => {
          console.log(res);

        })
        success()
      }} onCancel={handleCancel1}>
        <p> 该作品是否要通过审核,成功后将在前端展示</p>
      </Modal>
      <Modal title="图片审核" visible={isModalVisible2} onOk={() => {
        handleOk2()
        const obj = {
          id: imgitem.id,
          lines: 1
        }
        API.zlchangeimg(obj).then(() => {
          API.getPhoto().then((res) => {  //获取上传图片
            setimg(res.data.data)
          })
        })
        const obj1 = {
          workMain: imgitem.img,
          portraitsImg: "https://img2.baidu.com/it/u=1163898199,560774324&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=504",
          workText: '',
          worklabel: '',
          workName: '张磊',
          likeNumber: '1230',
          recommend: '98',
          hotThe: '普通',
          workType: '1',
          workgenre: '游戏',
          workTime: new Date().toLocaleString(),
          worksHoter: '1',
          userID: imgitem.userid,
          title: '',
          musicImg: '',
          author: '',
          lines: 1
        }
        console.log(obj1);

        API.addworklist(obj1).then((res) => {
          console.log(res);

        })
        success()
      }} onCancel={handleCancel2}>
        <p> 该作品是否要通过审核,成功后将在前端展示</p>
      </Modal>
      <Modal title="文字审核" visible={isModalVisible3} onOk={() => {
        handleOk3()

        const obj = {
          id: wordsitem.id,
          lines: 1
        }
        API.zlchangewords(obj).then(() => {
          API.getwords().then((res) => {//获取上传文字
            setwords(res.data.data)
          })
        })
        const obj1 = {
          workMain: wordsitem.name,
          portraitsImg: "https://img2.baidu.com/it/u=1163898199,560774324&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=504",
          workText: '',
          worklabel: '',
          workName: '张磊',
          likeNumber: '1230',
          recommend: '98',
          hotThe: '普通',
          workType: '4',
          workgenre: '游戏',
          workTime: new Date().toLocaleString(),
          worksHoter: '1',
          userID: wordsitem.userid,
          title: '',
          musicImg: '',
          author: '',
          lines: 1
        }
        console.log(obj1);

        API.addworklist(obj1).then((res) => {
          console.log(res);

        })
        success()
      }} onCancel={handleCancel3}>
        <p> 该作品是否要通过审核,成功后将在前端展示</p>
      </Modal>
    </div>
  )
}
